@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";



@font-face {
  font-family: Be Vietnam Pro;
  src: url("/Fonts/Be_Vietnam_Pro/BeVietnamPro-Medium.woff2");
}
:root {
--orange:#FF9500;
--yellow:#FFF4E5;
--very-light-orange:#FFEACC;
--lightest-orange:#FFF9F0;
--main-font: Be Vietnam Pro;
--light-gray:#4C4C4D;
--lightest-gray:#59595A;
--gray:#333;
}



body {
  font-family: var(--main-font);
  font-size: 14px;
  font-weight: 500;
  color: #262626;
}

.icon {
  position: absolute;
  left: -24px;

  top: -30px;
}


.answer-enter-from {
  opacity: 0;
  transform:scale(0.6)
}
.answer-enter-to {
  opacity:1;
  transform: scale(1);
}
.answer-enter-active, .fade-leave-active {
  transition: all .5s ease;
}

.answer-leave-from {
  opacity:1;
  transform: scale(1);
}
.answer-leave-to {opacity: 0;
  transform:scale(0.6)}
.answer-leave-active { transition: all .4s ease;}




.question {
  transition:all 0.3 ease
}


.bg-cont {
  background-color: var(--orange);
}
.bgg-yellow {
  background-color: var(--yellow);
}
.orange-font {
  color: var(--orange);
}

.gray-font {
  color: #4C4C4D;
}
.dark-gray {
  color: var(--gray);
}
.lightest-gray-font {color:var(--lightest-gray)}
 .icon {
  position: absolute;
  left: -24px;
  top: -30px;
}
.play-btn {
  border-radius: 68px;
  border: 4px solid rgba(255, 255, 255, 0.3);

  background: rgba(255, 255, 255, 0.2);
}
.size-block {
  width: 89%;
}

.flex-block-size {
  width: 48%;
}
.linehight-lg {
  line-height: 54px;
}
.linehight-xl {
  line-height: 72px;
}
.plan-title {
  border-radius: 4px;
  border: 1px solid var(--very-light-orange);
  background: var(--lightest-orange);
}
.included {
  border-radius: 4px;
  border: 1px solid var(--very-light-orange);
  background: var(--lightest-orange);
}